<template>
<div id="app">
<transition name="fade-slide" mode="out-in">
<router-view />
</transition>
</div>
</template>

<script>
export default { name: 'App' }
</script>

<style>
@import '@/assets/theme.css';

#app {
background: linear-gradient(to bottom right, var(--color-bg), #fff5fb);
min-height: 100vh;
}

.fade-slide-enter-active { animation: fadeInUp 0.5s ease; }
.fade-slide-leave-active { animation: fadeOutDown 0.5s ease; }
@keyframes fadeInUp { from { opacity:0; transform: translateY(20px) } to { opacity:1; transform: translateY(0) }}
@keyframes fadeOutDown { from { opacity:1; transform: translateY(0) } to { opacity:0; transform: translateY(20px) }}
</style>